<template>
	<view class="content">
		<view class="w1">
			<image class="avatar" :src="avatarUrl"></image>
			<view class="user">
				<view>{{ nickname }}</view>
				<view>{{ phoneNumber }}</view>
			</view>
		</view>
		<view>
			<button class="adress" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button>
		</view>
		<view>
			<input class="inpname" type="nickname" @change="nickNameChange" :value="nickName" placeholder="请输入昵称" />
		</view>
		<view>
			<button class="getphone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>
		</view>
		<view>
			<button class="login" type="primary" @click="handleLogin">立即登录</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageURL: 'https://i.imgs.ovh/2023/10/21/2Rtq2.png',
			title: 'Hello',
			code: '-',
			openId: '-',
			sessionKey: '-',
			nickname: '请登录',
			phoneNumber: '请绑定手机号',
			avatarUrl: 'http://tmp/hkSX9ONWnrXr74ccd3398e28eee3d46f3715cf48fd32.jpeg',
			state: 1
		};
	},
	onLoad() {
		this.initUserInfo();
	},
	methods: {
		nickNameChange(e) {
			this.nickname = e.detail.value;
			let params = {};
			params.nickName = this.nickname;
			uni.setStorageSync('nickname', this.nickname);
			// params.openId = uni.getStorageSync('openId');
			// wx.request({
			// 	url: 'http://localhost:8888/login/updateUserInfo',
			// 	method: 'POST',
			// 	data: params
			// })
		},
		onChooseAvatar(e) {
			console.log(e.detail.avatarUrl);
			this.avatarUrl = e.detail.avatarUrl;
			let params = {};
			params.avatarUrl = this.avatarUrl;
			uni.setStorageSync('avatarUrl', this.avatarUrl);
			// params.openId = uni.getStorageSync('openId');
			// wx.request({
			// 	url: 'http://localhost:8888/login/updateUserInfo',
			// 	method: 'POST',
			// 	data: params,
			// 	success: function(res) {
			// 		uni.showToast({
			// 			title: '操作成功',
			// 			icon: 'none'
			// 		})
			// 	}
			// })
		},
		getPhoneNumber(e) {
			let params = {};
			params.openId = uni.getStorageSync('openId');
			params.code = e.detail.code;
			var that = this;
			uni.request({
				url: 'http://192.168.42.13:8888/login/getPhoneNumber',
				method: 'POST',
				data: params,
				success: function (res) {
					uni.showToast({
						title: '获取成功',
						icon: 'none'
					});
					that.phoneNumber = res.data.data;
					uni.setStorageSync('phoneNumber', that.phoneNumber);
				}
			});
		},

		// 初始化用户的信息，当用户再次登录时获取的是应用的用户信息
		initUserInfo() {
			let that = this;
			let openId = uni.getStorageSync('openId');
			let params = {};
			params.openId = openId;
			uni.request({
				url: 'http://192.168.42.13:8888/login/initUserInfo',
				method: 'GET',
				data: params,
				success: function (res) {
					// 已经注册
					if (res.data.code == 200) {
						that.nickname = res.data.data.nickName;
						that.phoneNumber = res.data.data.phoneNumber;
						that.avatarUrl = res.data.data.avatarUrl;
					}
				}
			});
		},

		// 获取微信的用户信息
		// getUserInfo() {
		// 	uni.getUserProfile({
		// 		desc: '获取你的昵称、头像、地区及性别',
		// 		success: function(res) {
		// 			let params = {}
		// 			params.sessionKey = uni.getStorageSync('sessionKey')
		// 			params.openId = uni.getStorageSync('openId')
		// 			params.iv = res.iv
		// 			params.encryptedData = res.encryptedData
		// 			uni.request({
		// 				url: 'http://localhost:8888/login/getPhoneNumber',
		// 				method: 'POST',
		// 				data: params,
		// 				success: function(res) {
		// 					console.log(res)
		// 				}
		// 			})
		// 		}

		// 	})

		// },

		handleLogin() {
			let code = '';
			let that = this;
			uni.login({
				provider: 'weixin',
				success(res) {
					console.log(res);
					code = res.code;
					that.code = res.code;
					uni.request({
						url: 'http://192.168.42.13:8888/login/doLogin?code=' + code,
						method: 'GET',
						data: {
							nickname: that.nickname,
							phoneNumber: that.phoneNumber,
							profilePhoto: that.avatarUrl
						},
						success: function (resp) {
							console.log(resp.data.data);
							uni.setStorageSync('uid', resp.data.data.uid); // 存uid
							// 存openId，是需要存的，因为退出登录后，uid会被清空，而再次登录时要显示已经注册过的电话、头像，就需要查询，可以使用本地存储的openId
							uni.setStorageSync('openId', resp.data.data.openId);
							uni.setStorageSync('phoneNumber', resp.data.data.phoneNumber);
							uni.setStorageSync('nickname', resp.data.data.nickname);
							uni.setStorageSync('avatarUrl', resp.data.data.avatarUrl);
							uni.switchTab({
								url: '../index/index'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style>
.w1 {
	width: 750rpx;
}
.avatar {
	width: 130rpx;
	height: 130rpx;
	margin-top: 89rpx;
	position: absolute;
	margin-left: 105rpx;
	border-radius: 100rpx;
}

.adress {
	background: 0, 0, 0, 0;
	position: absolute;
	margin-top: 300rpx;
	margin-left: 200rpx;
	width: 340rpx;
}

.inpname {
	text-align: center;
	position: absolute;
	margin-top: 600rpx;
	margin-left: 200rpx;
	width: 340rpx;
	height: 60rpx;
	font-size: 20rpx;
	background-color: white;
}

.getphone {
	position: absolute;
	margin-top: 670rpx;
	margin-left: 200rpx;
	width: 340rpx;
}

.login {
	position: absolute;
	margin-top: 900rpx;
	margin-left: 200rpx;
	width: 340rpx;
}

.user {
	position: absolute;
	margin-top: 200rpx;
	margin-left: 200rpx;
	width: 750rpx;
}

.user :nth-child(1) {
	position: absolute;
	font-size: 20rpx;
	margin-left: 400rpx;
	color: white;
}
.user :nth-child(2) {
	position: absolute;
	font-size: 20rpx;
	margin-top: -100rpx;
	margin-left: 200rpx;
	color: white;
}

.content {
	width: 100%;
	align-items: center;
	justify-content: center;
	position: absolute;
}

.text-area {
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

page,
body {
	background: url('https://i.imgs.ovh/2023/10/21/2Rtq2.png') no-repeat center center fixed;
	background-size: cover;
	box-sizing: border-box;
}
</style>
